<template>
  <div class="music-bg">
    <!-- 音乐播放器主要部分 -->
    <div class="munsic-bg-main">
      <!-- 上面的部分 -->
      <el-col :span="24">
        <div class="music-top"></div>
      </el-col>
      <el-col :xs="2" :sm="3" :md="4" :lg="6" class="music-tool-box"></el-col>
      <!-- 主要部分 -->
      <el-col :xs="20" :sm="18" :md="16" :lg="12" class="music-main">
        <!-- 主要部分头部logo+搜索框 -->
        <el-col :span="24" class="music-main-top">
          <el-col :xs="10" :sm="10" :md="6" class="music-main-top-text" > 二饭的音乐播放器 </el-col>
          <el-col :xs="1" :sm="1" :md="7" class="music-tool-box" ></el-col>
          <!-- 搜索框 -->
          <el-col :xs="12" :sm="12" :md="9" class="music-search-box" >
            <el-col :xs="22" :sm="22" :md="22">
              <input type="text" class="music-search" @keyup.enter="musicSearch" v-model="musicName" placeholder="搜索你喜欢的音乐"/>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2">
              <a href="javascript:;" class="el-icon-search music-search-icon" @click="musicSearch"></a>
            </el-col>
          </el-col>
          <el-col :xs="1" :sm="1" :md="2" class="music-tool-box" ></el-col>
        </el-col>
        <!-- 主要部分身体 -->
        <el-col :span="24" class="music-main-body">
          <!-- 歌曲列表 -->
          <el-col :span="6" :xs="12" class="music-main-list">
            <ul style="height:100%;overflow:auto;">
              <li v-for="(item,index) in musicList" :key="item.id">
                <el-col :span="3">
                  <a href="javascript:;" @click="musicPlay(item.id,index)"><img :src="index==currentIndex?playingImgSrc:onImgSrc"></a>
                </el-col>
                <el-col :span="18" class="music-main-list-name">{{item.name}}</el-col>
                <el-col :span="3">
                  <a href="javascript:;" v-if="item.mvid!==0" @click="playMv(item.mvid)"><img src="img/mv.png" alt="mv"></a>
                </el-col>
              </li>
            </ul>
          </el-col>
          <!-- 专辑封面 -->
          <el-col :span="12" class="music-main-img-box hidden-xs-only"> 
            <el-col :span="6" class="music-tool-box height">
              <div class="music-tool-box1"></div>
            </el-col>
            <el-col :span="12">
              <div class="music-main-img-bg" :class="{'img-rotate':isPlay,'img-rotate-puased':isPlay==false}">
                <img src="img/cd.png" alt="">
                <div class="music-main-img">
                  <img :src="mvPicSrc" alt="">
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="music-tool-box"></el-col>
          </el-col>
          <!-- 热门评论 -->
          <el-col :span="6" :xs="12" class="music-main-comments">
            <el-col :span="1" class="music-tool-box1"></el-col>
            <el-col :span="23" style="height:100%;overflow:auto;" class="comments-scroll">
              <h4>热门评论</h4>
              <el-col class="music-main-comments-list" v-for="(item,index) in commentList" :key="index">
                <el-col :span="24" class="music-main-comments-item">
                  <el-col :span="6">
                    <div class="music-main-comments-avatar">
                      <img :src="item.user.avatarUrl" alt="">
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <h5>{{item.user.nickname}}</h5>
                    <p>{{item.content}}</p>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <!-- 主要部分底部 -->
        <el-col :span="24" class="music-main-bottom">
          <audio ref="audio" :src="musicUrl" loop @canplay="getDuration" @timeupdate="updateTime"></audio>
          <el-col :xs="3" :sm="3" :md="2">
            <a href="javascript:;" :class="isPlay?'el-icon-video-pause':'el-icon-video-play'" @click="changePlayPause"></a>
          </el-col>
          <el-col :xs="6" :sm="6" :md="3" class="music-main-bottom-text">
            <span>{{curTime}}&nbsp;</span>
            <span>/&nbsp;{{allTime}}</span>
          </el-col>
          <el-col :xs="12" :sm="12" :md="17" class="music-main-bottom-slider">
            <el-slider v-model="musicStep" :show-tooltip="false" ref="progress"></el-slider>
          </el-col>
          <el-col :xs="3" :sm="3" :md="2" class="music-main-bottom-vol">
            <a href="javascript:;" @click="changeShow">
              <img :src="volStep==0?noVolSrc:volSrc" alt="">
            </a>
            <div class="music-volbox" v-show="isShow==true" @mouseover="showVol" @mouseleave="hideVol">
              <el-slider v-model="volStep" vertical height="70px" :show-tooltip="false" @input="changeVol" :step="10"></el-slider>
            </div>
          </el-col>
        </el-col>
      </el-col>
      <el-col :xs="2" :sm="3" :md="4" :lg="6" class="music-tool-box"></el-col>
    </div>

    <el-col :span="24" class="tiktok-bottom">
          <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>
          <el-col :md="8" :xs="22" :sm="18">
                      <el-col :span="24" class="tiktok-form-back">
                            <div class="tiktok-back-box" @click="close()">
                                <img src="img/close.png" alt="关闭系统"> 关闭系统
                            </div>
                      </el-col>
          </el-col>
          <el-col :md="8" :xs="1" :sm="3" class="perchbox"></el-col>


    </el-col>

    <!-- mv部分 -->
    <div class="music-bg-mv" v-show="mvUrl!==''" @click="hideMv">
      <video :src="mvUrl" controls autoplay>您的浏览器不支持播放mv。</video>
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      isPlay: false,
      musicName: "",
      musicList: [],
      musicUrl: "",
      onImgSrc: require("../../assets/on.png"),
      playingImgSrc: require("../../assets/playing.png"),
      currentIndex: -1,
      mvId: 0,
      mvPicSrc: require("../../assets/erfan.jpg"),
      commentList: [],
      mvUrl: "",
      volStep: 30,
      isShow: false,
      volSrc: require("../../assets/vol.png"),
      noVolSrc: require("../../assets/novol.png"),
      musicStep: 0,
      duration: 0,
      allTime: '00:00',
      currentTime: 0,
      curTime: '00:00'
    };
  },
  created () {},
  mounted () {
    this.$refs.audio.volume=this.volStep/100;
  },
  methods: {
    // 切换播放暂停
    changePlayPause () {
      if(this.musicUrl!==""){
        this.isPlay=!this.isPlay;
        if(this.isPlay){
          this.$refs.audio.play();
        }else{
          this.$refs.audio.pause();
        }
      }
    },
      
    // 音乐搜索
    musicSearch () {
      this.isPlay=false;
      this.$refs.audio.pause();
      this.musicUrl='';
      this.currentIndex=-1;
      let that=this;
      
      this.$axios.get(this.$musicApi+"/search?keywords="+that.musicName).then(
        function(res){
          that.musicList=res.data.result.songs;
        }
      ).catch(function(){})
      
    },
    // 点击播放按钮播放音乐
    musicPlay (musicId,index) {
      this.currentIndex=index;
      
      let that=this;
      // 获取音乐播放
      this.$axios.get(this.$musicApi+"/song/url?id="+musicId).then(
        function(res){
          that.musicUrl=res.data.data[0].url;
          setTimeout(() => {
            // that.getDuration();
            that.$refs.audio.play();
            that.isPlay=true;
          }, 200);
        }
      );
      
      // 获取专辑图片
      this.$axios.get(this.$musicApi+"/song/detail?ids="+musicId).then(
        function(res){
          that.mvPicSrc=res.data.songs[0].al.picUrl;
        }
      );
      // 获取热门评论
      this.$axios.get(this.$musicApi+"/comment/hot?type=0&id="+musicId).then(
        function(res){
          that.commentList=res.data.hotComments;
        }
      );
      
    },
    // 播放MV
    playMv (mvId) {
      let that=this;
      this.$axios.get(this.$musicApi+"/mv/url?id="+mvId).then(
        function(res){
          that.mvUrl=res.data.data.url;
        }
      )
    },
    // 关闭mv
    hideMv (event) {
      let el1 = event.currentTarget;
      let el2 = event.target;
      if (el1 === el2) {
        this.mvUrl="";
      }
    },
    // 改变音量
    changeVol () {
      this.$refs.audio.volume=this.volStep/100;
    },
    // 音量框显示状态
    showVol () {
      // console.log(11);
      this.isShow=true;
    },
    hideVol () {
      setTimeout(() => {
        this.isShow=false;
      }, 200);
    },
    changeShow () {
      this.isShow=!this.isShow;
    },
    // noVol(){
    //   console.log(11);
    //   this.volStep==0;
    // }
    // 获取音频时长
    getDuration () { // canplay(audio钩子函数)时获取音频总时长
      this.duration = this.$refs.audio.duration;
      this.allTime = this.formatTime(this.$refs.audio.duration);
    },
    //格式化时间
    formatTime (time) {
      if (time === 0) {
        this.curTime = '00:00';
        return
      }
      // '字符串${变量}'  等同于  '字符串'+变量
      const mins = Math.floor(time / 60) < 10 ? `0${Math.floor(time / 60)}` : Math.floor(time / 60);
      const sec = Math.floor(time % 60) < 10 ? `0`+Math.floor(time % 60) : Math.floor(time % 60);
      // 也可写成return `${mins}:${sec}`
      return mins+':'+sec;
    },
    // 获取当前播放时间
    updateTime (e) { // timeupdate(audi0钩子函数)时获取当前播放时间
      this.currentTime=e.target.currentTime;
      this.curTime = this.formatTime(this.currentTime);
      this.updateProgress(this.currentTime, this.duration);
    },
    // 更新进度条
    updateProgress (cur,dur) {
      this.musicStep=(cur/dur).toFixed(5)*100;
      // console.log(this.musicStep);
    },
    // 点击进度条播放
    // clickProgress (event) {
    //   // this.currentTime=this.duration*(this.musicStep/100);
    //   // console.log(this.currentTime);
    //   // this.updateProgress (this.currentTime, this.duration);

    // }
    close(){
          this.$router.push('/index');
    }
  }
};
</script>

<style lang='less'>
div {
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}
a{
  color: black;
}
.music-bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to top right, #a38e61, #166aa2);

  .music-top {
    height: 15vh;
  }

  // 主要部分
  .music-main {
    height: 60vh;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    overflow: hidden;
    position: relative;

    // 主要部分头部
    .music-main-top {
      height: 8vh;
      background-color: #11a2de;

      .music-main-top-text {
        padding: 2.5vh 0;
        color: #fff;
        font-weight: 700;
        font-size: 0.9rem;
      }

      .music-search-box {
        margin-top: 2.3vh;
        padding: 0 10px;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 3vh;
        text-align: left;
        vertical-align: middle;
        display: flex;
        align-items: center;

        .music-search {
          width: 100%;
          height: 3.5vh;
          background-color: rgba(255, 255, 255, 0);
          border: none;
          outline: none;
        }

        .music-search-icon {
          margin-right: 10px;
        }
      }
    }

    // 主要部分身体
    .music-main-body{
      height: 52vh;

      // 歌曲列表
      .music-main-list{
        height: 100%;
        
        ul{
          padding: 5px;
          width: 100%;
          font-size: 0.8rem;
          text-align: left;
          
          li{
            padding: 0 5px;
            width: 100%;
            height: 5vh;
            display: flex;
            align-items: center;


            .music-main-list-name{
              padding-left: 5px;
            }

            img{
              width: 100%;
              height: 100%;
            }
          }
          li:nth-child(2n+1){
              background-color: rgba(255, 255, 255, 0.2);
          }
        }
        
      }

      // 专辑封面
      .music-main-img-box{
        height: 100%;

        .music-main-img-bg{
          margin: 9vh auto;
          width: 25vh;
          height: 25vh;
          border-radius: 50%;
          overflow: hidden;
          position: relative;

          img{
            width: 100%;
            height: 100%;
          }

          .music-main-img{
            margin: 0 auto;
            width: 13vh;
            height: 13vh;
            border-radius: 50%;
            overflow: hidden;
            z-index: 2;
            position: absolute;
            top: 6vh;
            left: 6vh;
          }
        }
      }
      
      // 热门评论
      .music-main-comments{
        padding-top: 5px;
        height: 100%;
        text-align: left;
        
        h4{
          padding: 5px;
        }

        .music-main-comments-item{
          padding: 5px;

          .music-main-comments-avatar{
            width: 4vh;
            height: 4vh;
            border-radius: 50%;
            overflow: hidden;

            img{
              width: 100%;
              height: 100%;
            }
          }

          h5{
             font-size: 0.9rem;
          } 

          p{
             font-size: 0.9rem;
          }
        }
      }
    }

    // 主要部分尾部
    .music-main-bottom{
      height: 6vh;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;

      .music-main-bottom-text{
        font-size: 0.8rem;
      }

      .music-main-bottom-vol{
        position: relative;
        width: 3vh;
        height: 3vh;

        img{
          margin-left: 10px;
          width: 100%;
          height: 100%;
        }

        .music-volbox{
          padding-top: 5px;
          position: absolute;
          bottom: 3.5vh;
          left: 5px;
          width: 28px;
          height: 80px;
          background-color: rgba(0, 0, 0, 0.3);
          z-index: 9999;
          border-radius: 5px;

          .el-slider__runway{
            margin-left: 12px;
            width: 4px;
          }

          .el-slider__button{
            margin-right: 2px;
            width: 8px;
            height: 8px;
            border: 0;
          }

          .el-slider__bar{
            width: 4px;
          }
        }

      }

      
      .el-icon-video-play,.el-icon-video-pause{
        font-size: 1.5rem;
      }

      .music-main-bottom-slider{
        padding: 10px;
      }
    }
    
  }

  .music-bg-mv{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;

    video{
      margin-top: 15vh;
      height: 60%;
      width: 50%;
      z-index: 333;
    }
  }
}



.music-tool-box {
  height: 1vh;
}

.music-tool-box1{
  width: 1.5px;
  height: 100%;
  background-image: linear-gradient(#f3eded00,#564E44, #dcdde000);
}

// 优化样式
.height{
  height: 100%;
}

.img-rotate{
  animation: rotateImg 10s linear infinite;
  animation-fill-mode:both;
}

.img-rotate-puased{
  animation-play-state: paused;
}

@keyframes rotateImg {
  0% {transform : rotate(0deg);}  
  100% {transform : rotate(360deg);} 
}

// 滚动条
ul::-webkit-scrollbar,.comments-scroll::-webkit-scrollbar {
  width: 6px;
}
ul::-webkit-scrollbar-thumb,.comments-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
ul::-webkit-scrollbar-track,.comments-scroll::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}
ul::-webkit-scrollbar-thumb:hover,.comments-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
ul::-webkit-scrollbar-thumb:active,.comments-scroll::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.4);
}

.tiktok-bottom{
      .tiktok-form-back{
            height: 10vh;
            position: relative;

            
            .tiktok-back-box{
                  background-color: #F6F6F3;
                  position: absolute;
                  left:50%;
                  top:50%;
                  transform: translate(-50%, -50%);

                  display:flex;
                  align-items: center;
                  justify-items: center;
                  font-size: 14px;
                  font-weight: 700;
                  height: 40px;
                  padding: 0 20px;
                  width: 130px;
                  border-radius: 20px;
                  box-shadow: 1px 1px 5px #bbc0c0;
                  cursor:pointer;
            }
            img{
                  width: 20px;
                  margin-right: 7px;
            }
      }
}
</style>